import { BaseReactElementState, BaseReactElement, reactControl, BaseReactElementControl } from "pao-aop-client";

import React from "react";

import { addon, Ref, getObject, log } from "pao-aop";
import { SignDetailLayout } from "src/projects/industryInternetSign/layout/sgin-detail-layout";
import { IExternalLinkSignService, ExternalLinksSign } from "src/models/externalLinksSign";
import { match } from "react-router";
import { message } from "antd";
import { SIGN_ID, ROUTE_PATH } from "../../app/util-tool";

let title_detail_columns = [
    { title: '跳转标识:', fieldName: 'handle_code' },
    { title: '跳转网址:', fieldName: 'link_website' },
    { title: '创建日期:', fieldName: 'create_date' },
];

/**
 * 组件：外链标识详情页视图控件状态
 */
export interface ExternalLinksDetailViewState extends BaseReactElementState {
    /** 外链标识数据源 */
    data?: ExternalLinksSign;
    /** 滚动条 */
    loading?: boolean;
}

/**
 * 组件：外链标识详情页视图控件
 * 描述
 */
export class ExternalLinksDetailView extends BaseReactElement<ExternalLinksDetailViewControl, ExternalLinksDetailViewState> {
    constructor(props: ExternalLinksDetailViewControl) {
        super(props);
        this.state = {
            loading: false,
            data: {}
        };
    }
    /** 修改Icon回调事件 */
    onClickEditor = () => {
        this.props.history!.push(ROUTE_PATH.changeExternalLinks + `/${this.state.data!.id}`);
    }

    /** 删除Icon回调事件 */
    onClickDel = () => {
        this.setState({
            loading: true
        });
        this.deleteDeatail()
            .then(() => {
                this.setState({
                    loading: false
                });
            })
            .catch(error => {
                this.setState({
                    loading: false
                });
                log("ExternalLinksDetailViewViewControl-delete", error.message);
            });
    }

    componentWillMount() {
    }

    componentDidMount() {
        let { [SIGN_ID]: id } = this.props.match!.params;

        if (id) {
            this.setState({
                loading: true
            });
            this.externalLinkService!()!.get_external_link!(id)!
                .then((data) => {
                    this.setState({
                        loading: false,
                        data
                    });
                })
                .catch(error => {
                    this.setState({
                        loading: false
                    });
                    log("ExternalLinksDetailViewViewControl-get_external_link", error.message);
                });
        }
    }

    // 初始化服务
    externalLinkService?() {
        return getObject(this.props.externalLinkService_Fac!);
    }

    // 删除品类详情信息
    async deleteDeatail() {
        let { [SIGN_ID]: id } = this.props.match!.params;

        const result = await this.externalLinkService!()!.delete_external_link!([id])!;
        message.info("删除" + result ? '成功' : '失败');
    }

    render() {
        let this_props = {
            loading: this.state.loading,
            title_name: this.state.data!.handle_name,
            rc_code: this.state.data!.rc_code,
            title_detail_columns: title_detail_columns,
            title_detail_columns_data: this.state.data,
            icon_props: [{
                icon: 'antd@edit',
                btn_method: this.onClickEditor
            }, {
                icon: 'antd@delete',
                btn_method: this.onClickDel
            }],
        };
        return (
            <SignDetailLayout {...this_props} />
        );
    }
}

/**
 * 控件：外链标识详情页视图控件
 * 控制外链标识详情页视图控件
 */
@addon('ExternalLinksDetailView', '外链标识详情页视图控件', '控制外链标识详情页视图控件')
@reactControl(ExternalLinksDetailView, true)
export class ExternalLinksDetailViewControl extends BaseReactElementControl {
    /**
     * 单品标识服务
     */
    public externalLinkService_Fac?: Ref<IExternalLinkSignService>;
    match?: match<{ [SIGN_ID]: string }>;
}